<script lang="ts" setup>
import { useDesign } from '@fl/hooks/web/useDesign'
import { useUserStoreWithOut } from '@fl/store/modules/user'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '@fl/store/modules/app'
import logo from '/assets/logo.png'

const { query } = useRoute()
const appStore = useAppStore()
const title = unref(computed(() => appStore.getTitle))
const { getPrefixCls } = useDesign()
const userStore = useUserStoreWithOut()
const custIcon = userStore.getUserInfo?.custIcon || '/assets/custIcon.png'
const nickName = userStore.getUserInfo?.nickName || ''
const logoPrefixCls = getPrefixCls('logo')
// const prefixCls = getPrefixCls('tool-header')

const form = ref<any>({
    keyword: '',
    type: 1,
})

// const { openNewWindow } = useOpen()

// function search() {
//     openNewWindow('/supply', {
//         enterpriseName: form.value.keyword,
//     })
// }

watchEffect(() => {
    if (query?.enterpriseName) {
        form.value.keyword = query?.enterpriseName
    }
})

function logout() {
    ElMessageBox.confirm(
        '确定要退出当前账号吗？',
        '提示',
        {
            type: 'warning',
        },
    )
        .then(() => {
            userStore.logout()
        })
}
</script>

<template>
    <div class="user-header">
        <div class="header-content pl-[5%] pr-[5%] mx-auto flex w-[100%] justify-between items-center">
            <div class="flex-none">
                <router-link class="!h-[var(--logo-height)]'] decoration-none flex flex-none relative cursor-pointer overflow-hidden items-center"
                             :class="`${logoPrefixCls} ${logoPrefixCls}__Top`"
                             to="/"
                >
                    <!-- <Logo :size="40" /> -->

                    <img height="36px"
                         :src="logo"
                    >

                    <div class="ml-8 font-size-28 text-#000 font-600 line-height-36 w-400">
                        {{ title }}
                    </div>
                </router-link>
            </div>
            <!-- <div class="user-nav-list">gfgfgfdf</div> -->
            <div v-if="nickName"
                 class="userinfo-logout"
            >
                <div class="custIcon">
                    <img :src="custIcon"
                         alt=""
                    >
                </div>

                <div class="username">
                    {{ nickName }}
                </div>

                <div class="logout-btn"
                     @click="logout"
                >
                    退出
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-tool-header';

.@{prefix-cls} {
    transition: left var(--transition-time-02);
}

.override-header {
    --el-menu-border-color: transparent;
    --el-menu-active-color: #da0004;
    --el-menu-hover-bg-color: rgba(#da004d, 0.05);
    --el-menu-hover-text-color: #da0004;
    --el-menu-item-font-size: 16px;
    --el-text-color-primary: #000;
}

:deep(.el-menu--horizontal > .el-menu-item.is-active) {
    position: relative;
    font-weight: 500;
    border-bottom-color: transparent;

    &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        display: block;
        width: 24px;
        height: 3px;
        background-color: #da0004;
        border-radius: 2px;
        content: '';
        transform: translateX(-50%);
    }
}

:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
    background-color: transparent;
}

:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
    background-color: transparent;
}

.search-input {
    .el-input-group__prepend {
        .el-select {
            height: 100%;
            background: #fff;

            :deep(.el-select__wrapper) {
                height: 100%;
            }
        }
    }

    :deep(.el-input-group__append) {
        background: #da0004;
        height: 40px;
        width: 40px;

        .el-button--default {
            color: #fff;
        }
    }
}

.active-item:hover {
    background: #d9d9d9;
    cursor: pointer;
}
.user-header {
    height: 64px;
    background-color: #fff;
    .header-content {
        height: 100%;
    }
    .userinfo-logout {
        display: flex;
        align-items: center;
        > .custIcon {
            width: 35px;
            height: 35px;
            overflow: hidden;
            border-radius: 50%;
            > img {
                width: 100%;
            }
        }
        > .username {
            padding-left: 8px;
            font-size: 16px;
            color: #1d2129;
        }
        > .logout-btn {
            font-size: 16px;
            padding-left: 20px;
            color: var(--el-color-primary);
            cursor: pointer;
        }
    }
}
</style>
